<template>
  <section class="whaleyVR">
    <div class="whaley-brand ">
      <p class="title whaleyVR-title">
        <span class="text">顶级IP &amp; VR：</span>
        <span class="label">顶级设备</span>
        <span class="pipe">&middot;</span>
        <span class="label">高效团队</span>
        <span class="pipe">&middot;</span>
        <span class="label">精良后期</span>
      </p>
      <div class="whaleyVR-linear-gradient__wrapper">
        <div class="whaley-brand__pic">
          <img src="../assets/images/ip-cover-pic.jpg" alt="">
          <p class="title">《极地 VR》纪录片荣膺美国阿克雷德国际电影节记录短片表彰奖</p>
        </div>        
      </div>
    </div>
    <carousel :data="pics" class="whaleyVR-profile"></carousel>
    <slot name="next"></slot>
  </section>
</template>
<script>
  import Carousel from './carousel'
  import pic1 from '../assets/swipe/vr-ip-slide1.jpg'
  import pic2 from '../assets/swipe/vr-ip-slide2.jpg'
  import pic3 from '../assets/swipe/vr-ip-slide3.jpg'
  import pic4 from '../assets/swipe/vr-ip-slide4.jpg'
  import picWebp1 from '../assets/swipe/vr-ip-slide1.webp'
  import picWebp2 from '../assets/swipe/vr-ip-slide2.webp'
  import picWebp3 from '../assets/swipe/vr-ip-slide3.webp'
  import picWebp4 from '../assets/swipe/vr-ip-slide4.webp'

  export default {
    components: { Carousel },
    data () {
      return {
        pics: [
          {
            'jpg': pic1,
            'webp': picWebp1,
            'text': '前所未有的沉浸式娱乐观感'
          },
          {
            'jpg': pic2,
            'webp': picWebp2,
            'text': '揭秘你不知道的蒙面唱将'
          },
          {
            'jpg': pic3,
            'webp': picWebp3,
            'text': '综艺娱乐节目的VR新尝试'
          },
          {
            'jpg': pic4,
            'webp': picWebp4,
            'text': 'VR镜头里别致的红酒之乡'
          }
        ]
      }
    },
    mounted () {},
    methods: {
      fontSize () {
        const rootDOM = getComputedStyle(document.body.parentElement)
        const rootFontSize = rootDOM.getPropertyValue('font-size')
        if (rootFontSize) {
          return rootFontSize.slice(0, -2)
        }
        return 16
      }
    }
  }
</script>
<style lang="scss" scoped>
  .whaley-brand__pic {
    .title {
      line-height: 1.55;
      padding: .3rem .25rem;
    }
  }
  .whaleyVR-profile {
    position: relative;
    height: 0;
    margin: .5rem 0 0;
    color: #fff;
    text-align: center;
    & .text {
      position: absolute;
      z-index: 2;
      left: 0;
      top: 1.4rem;
      padding: .75rem .8rem .7rem 1.2rem;
      font-size: .39rem;
      line-height: 1.55;
      border: .04rem solid #23577a;
      border-top: none;
      background: linear-gradient(90deg, rgba(42, 120, 180, .6), rgba(120, 61, 135, .05));
    }
    .carousel-frame .container {
      padding-bottom: 56.25%;
    }
  }
  @keyframes slow {
    0% {
      transform: rotate(0deg)
    }
 
    100% {
      transform: rotate(360deg)
    }
  }  
</style>
